// 粉笔主题色变量
$chalk-bg: #222d22;
$chalk-white: #fff;
$chalk-yellow: #ffe066;
$chalk-blue: #aee9f5;
$chalk-pink: #ffb7c5;
$chalk-green: #b6fcb6;
$chalk-shadow: #111a11;

:root {
  --chalk-bg: #222d22;
  --chalk-white: #fff;
  --chalk-yellow: #ffe066;
  --chalk-blue: #aee9f5;
  --chalk-pink: #ffb7c5;
  --chalk-green: #b6fcb6;
  --chalk-shadow: #111a11;
}

// 通用样式
.chalk-text-yellow { color: $chalk-yellow; }
.chalk-text-blue { color: $chalk-blue; }
.chalk-text-pink { color: $chalk-pink; }
.chalk-text-green { color: $chalk-green; }
.chalk-text-white { color: $chalk-white; }

.chalk-bg { background: $chalk-bg !important; }

// 粉笔按钮
.chalk-btn {
  background: transparent;
  color: $chalk-white;
  border: 2px solid $chalk-white;
  border-radius: 6px;
  font-weight: bold;
  box-shadow: 2px 2px 0 $chalk-shadow;
  transition: all 0.2s;
  cursor: pointer;
  padding: 6px 18px;
  margin: 2px;
}
.chalk-btn.yellow { border-color: $chalk-yellow; color: $chalk-yellow; }
.chalk-btn.blue { border-color: $chalk-blue; color: $chalk-blue; }
.chalk-btn.pink { border-color: $chalk-pink; color: $chalk-pink; }
.chalk-btn.green { border-color: $chalk-green; color: $chalk-green; }
.chalk-btn:hover {
  background: $chalk-shadow;
  color: $chalk-white;
}

// 输入框
.chalk-input {
  background: #2a3a2a;
  color: $chalk-white;
  border: 1.5px solid $chalk-white;
  border-radius: 4px;
  padding: 6px 10px;
  outline: none;
}
.chalk-input:focus {
  border-color: $chalk-yellow;
} 